<div class="layui-fluid" id="app-vue" lay-title="商家列表">
    <div class="layui-row layui-col-space10">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="custom-header">
                    <div class="custom-header-show">
                        <div class="custom-header-left display-flex">

                            <div class="layui-inline nepadmin-mar-r30">
                                <el-button type="primary"  @click="handleCreate({})"><i class="el-icon-plus"></i>新增商家</el-button>
                            </div>
                            <div class="layui-inline nepadmin-mar-r30">

                            </div>
                            <div class="layui-inline nepadmin-mar-r30">
                                <el-input placeholder="关键字查询" v-model="listQuery.keyword">
                                    <el-button size="small" type="primary"  slot="append"   @click="_initData(true)">搜索</el-button>
                                </el-input>
                            </div>

                            <div class="layui-inline  nepadmin-mar-r30">
                                <el-date-picker
                                        type="daterange"
                                        value-format="yyyy-MM-dd"
                                        v-model="listQuery.search_date"
                                        @change="_initData(true)"
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期">
                                </el-date-picker>


                            </div>
                        </div>
                        <div class="custom-header-right display-flex">

                            <export-excel
                                    url='/admin/merchant/merchantModel_lists'
                                    :list-query="listQuery"
                                    file-name="merchant"
                                    :generate-excel-data="onGenerateExcelData"
                            />


                        </div>
                    </div>
                </div>


                <div class="layui-card-body">



                    <el-table :data="tableData" v-loading="table_loading" border stripe  height="calc(100vh - 260px)">

                        <el-table-column label="ID" prop="id" width="80"></el-table-column>
                        <el-table-column prop="logo" label="logo" width="60">
                            <template slot-scope="scope">
                                <el-image style="width: 35px; height: 35px" :src="scope.row.logo" fit="fit"  :preview-src-list="[scope.row.logo]"></el-image>
                            </template>
                        </el-table-column>


                        <el-table-column label="店铺名" prop="name"  width="200"></el-table-column>
                        <el-table-column label="店主名" prop="contact_name" align="center" width="120"> </el-table-column>
                        <el-table-column label="店主手机号" prop="phone" align="center" width="160"> </el-table-column>
                        <el-table-column label="地址" prop="location_addr" align="center" width="160"> </el-table-column>
                        <el-table-column label="余额" prop="money" align="center" width="120"> </el-table-column>
                        <el-table-column label="状态" prop="status_name" align="center" width="140">
                            <template slot-scope="scope">
                                <el-switch
                                        class="switchStyle"
                                        v-model="scope.row.status_bool"
                                        active-color="#13ce66"
                                        active-text="启用"
                                        inactive-text="禁用"
                                        @change="handleSwitchChange(scope.row)"
                                >
                                </el-switch>
                            </template>
                        </el-table-column>

                        <el-table-column label="创建日期" prop="create_time" align="center" width="150"></el-table-column>

                        <el-table-column label="操作"  fixed="right" align="center" min-width="260">
                            <template slot-scope="scope">

                                <el-button size="mini"  @click="handleCreate( scope.row)">编辑</el-button>
                                <el-button size="mini"  type="warning" @click="handleMaster( scope.row)">查看技师</el-button>
                                <el-button size="mini" type="danger" @click="handleDelete(scope.row,scope.$index)">删除</el-button>
                            </template>
                        </el-table-column>

                    </el-table>


                    <div class="page-container display-flex">
                        <el-pagination  @current-change="handlePageChange" @size-change="handlePageSizeChange"  layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
                    </div>
                </div>
            </div>
        </div>

        <!--  添加产品新增   -->
    </div>

    <create-merchant ref="createMerchant"/>
</div>


<script>

    layui.extend({
        createMerchant: 'views/merchant/components/createMerchant',
    }).use(['admin', 'conf','view', 'jquery','createMerchant','exportExcel'], function (admin, conf,view,$,createMerchant,exportExcel) {



        var app = new Vue({
            el: '#app-vue',
            data: {
                table_loading:false,
                total:0,
                tableData: [],
                select_list: [],
                listQuery:{
                    page:1,
                    typeActivity:'',
                    search_date: [],
                    keyword:'',
                    activeGoodsState: 'goods_all',
                    activeCertState: 'cert_all',
                    activeAuthState: 'auth_all',
                    activeShopState: 'shop_all',
                },
            },
            components:{
                'export-excel': exportExcel,
                'create-merchant' : createMerchant,

            },
            created: function() {
                this._initData()
            },
            methods: {


                _initData:function(is_reset){
                    if(is_reset===true){

                        this.listQuery.page = 1
                    }
                    const that = this
                    //开启table加载效果
                    this.table_loading = true
                    admin.post({
                        url:'/admin/index/merchantModel_lists'
                        ,data:this.listQuery
                        ,success: function (res) {
                            that.table_loading = false
                            var data = res.data || {}
                            that.tableData = data.list || []
                            that.total = data.total || 0
                        }
                        ,complete:function(){
                            console.log('complete')
                            that.table_loading = false
                        }
                    })
                },

                handlePageSizeChange:function(limit){
                    this.listQuery.limit = limit
                    this._initData()
                },
                handlePageChange:function(page) {
                    this.listQuery.page = page
                    this._initData()
                },

                handleCreate:function(item) {
                    console.log(window)
                    this.$refs['createMerchant'].showDialog(item,this)

                },
                handleMaster:function(item) {
                    console.log(window)
                    window.location.href="/admin#/master/index/mch_id="+item.id+"/mch_name="+item.name
                },
                handleDelete:function(item,index){
                    const that = this
                    this.$confirm('确定删除选中的数据', '提示', { type: 'error' }).then(function(v){
                        admin.post({
                            url:'/admin/merchant/merchantModel_del'
                            ,data:{id:item.id }
                            ,success: function (res) {
                                that.tableData.splice(index,1)
                            }
                        })
                    }).catch(function() {
                        console.log('cancel')
                    })
                },
                handleSwitchChange:function(item){
                    admin.post({
                        url:'/admin/index/merchantModel_modInfo'
                        ,data:{id:item.id,status:item.status_bool?1:2}
                        ,success: function (res) {

                        }
                    })
                },
                handleStruct:function(){
                    window.location.href="/admin#/merchant/struct"
                },
                onGenerateExcelData:function(res){
                    var data = res.data.list||[]
                    const excel_obj = {
                        id: "ID",
                        name: "店铺名",
                        contact_name: "店主名",
                        phone: "店主手机号",
                        location_addr: "地址",
                        money: "余额",
                        create_time: "创建日期",

                    }
                    data.unshift(excel_obj)
                    return data
                },
            }
        })
    })

</script>

